<template>
  <div class="approved-products-container">
    <div class="header">
      <h2>已通过审核的商品</h2>
      <el-button type="primary" @click="refreshList">刷新列表</el-button>
    </div>
    
    <el-empty v-if="products.length === 0 && !loading" description="暂无已通过审核的商品" />
    
    <div v-else class="product-list">
      <ProductCard
        v-for="product in products"
        :key="product.id"
        :product="product"
        @product-deleted="handleProductDeleted"
      />
    </div>
    
    <el-pagination
      v-if="total > 0"
      class="pagination"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next"
      @current-change="fetchApprovedProducts"
    />
    
    <el-backtop :right="50" :bottom="50" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { productcheckAPI } from '@/http'
import ProductCard from '@/components/ProductCard.vue'

interface Product {
  id: number
  productName: string
  productBrand: string
  productType: string
  productPrice: number
  productMainImg: string
  productCount: number
  productStatus: number
  // 其他属性...
}

const products = ref<Product[]>([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

onMounted(() => {
  fetchApprovedProducts()
})

const fetchApprovedProducts = async () => {
  try {
    loading.value = true
    // 注意: 根据API文档，userId暂时默认为1，后端从token获取
    const response = await productcheckAPI.getCheckedProductList(1)
    products.value = response.data || []
    total.value = products.value.length
  } catch (error) {
    ElMessage.error('获取已通过审核商品列表失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

const refreshList = () => {
  currentPage.value = 1
  fetchApprovedProducts()
}

const handleProductDeleted = (productId: number) => {
  products.value = products.value.filter(p => p.id !== productId)
  ElMessage.success('商品已删除')
}
</script>

<style scoped>
.approved-products-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>